<template>
  <div>
    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Music'">音乐</button>
    <button @click="comp = 'Game'">游戏</button>
    <!-- 
      缓存组件：
      <keep-alive> 包裹动态组件时，默认会缓存所有不活动的组件实例，而不是销毁它们
        - include - 字符串或者正则表达式。只有名称匹配的组件会被缓存
        - exclude - 字符串或者正则表达式。任何名称匹配的组件都不会被缓存
        - max - 数字。最多可以缓存多少组件实例
     -->

    <!-- include的字符串写法，只限制一个 -->
    <!-- <keep-alive>
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的字符串写法，限制多个 -->
    <!-- <keep-alive include="News,Music">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的数组写法 -->
    <!-- <keep-alive :include="['News', 'Music']">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的正则写法 -->
    <!-- <keep-alive :include="/^News$/g">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- exclude的数组写法 -->
    <keep-alive :exclude="['News']" :max="2">
      <component :is="comp"></component>
    </keep-alive>
  </div>
</template>
<script>
import News from './components/News.vue';
import Music from './components/Music.vue';
import Game from './components/Game.vue';
export default {
  name: 'App',
  components: {
    News,
    Music,
    Game,
  },
  data() {
    return {
      comp: '',
    };
  },
};
</script>
<style></style>
